메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

IT/모바일

SVG의 현재 위치

한빛미디어

|

2002-11-28

|

by HANBIT

12,095

저자: 앤토인 퀸트(Antoine Quint), 역 전순재

2001년 9월 4일, W3C는 SVG(Scalable Vector Graphics 1.0) 규격을 발표하였다. 초안 이후로 규격의 진화를 준수해온 초창기 SVG 이용자들을 비롯하여 몇몇 사람들에게 SVG 1.0은 오랫동안 기다려온 숙원이었다. 1999년 2월에 처음 공개적인 초안이 나온 이후로 2년 반이라는 세월이 흘렀기 때문이다. 특히 SVG는 웹 그래픽을 위해서 너무나 필요한 도약이었다. 규격을 살펴 보면 숨막히도록 (600+ 페이지 이상) 자세하고 복잡하다는 것을 알 수 있을 것이다(예를 들어 필터와 애니메이션 곳곳에서).

오랜 동안 숙성된 결과로 나온 SVG 규격은 배포된 순간부터 지금까지 견고하고 다양한 지원을 해왔다. 본 기사의 목적은 SVG 세계에서 조만간 선보일 새로운 것들을 비롯하여 현재 사용할 수 있는 SVG 도구들에 대한 간략한 설명을 제공하는데 있다. 따라서 가장 재미있고 진보적이며 검증된, 활동적인 프로젝트들에 초점을 맞출 것이다.

현재 SVG를 볼 수 있는 방법은?

SVG에 대하여 가장 궁금해 할 것은 아마도 SVG 컨텐츠를 볼 수 있는 방법일 것이다. 현재 중요한 SVG 보기 도구는 독자적인 SVG 뷰어와 SVG-가능한 브라우저가 2가지가 있다.


XML 시작하기

참고 도서

XML 시작하기
에릭 레이


뷰어(Viewers)

오늘날 가장 진보적이면서 널리 퍼진 SVG 구현은 어도비(Adobe)사의 SVG 뷰어(Viewer)이다. 어도비는 SVG에 상당한 공을 들여 왔는데, 규격을 공동으로 작성하는 데서부터 SVG 도구들을 공동체에 초기부터 제공하는데 이르기까지 모든 범위를 아우른다. 현재 버전 3에서, 윈도우와 매킨토시 플랫폼에서 플러그인을 사용할 수 있으며 거의 모든 주요 브라우저에서도 잘 작동한다. 이 새로운 버전은 거의 모든 SVG 규격을 지원하며 진보된 SVG DOM 지원을 포함하고, ECMAScript 엔진을 장착한 스크립팅 능력을 훌륭하게 지원하며 애니메이션도 완벽하게 지원한다.

이 외에도 어도비는 리얼 플레이어(Real Player) 플러그-인도 포함하고 있는데, 이 플러그인을 사용하면 SVG 내용물을 멀티미디어 내용물과 함께 화면에 표시할 수 있다. 그리고 RealONE사의 SMIL 2.0 지원과 어도비의 SVG 뷰어 지원을 잘 활용하면 상당히 진보적인 작성이 가능하다는 것을 고려해 볼 가치가 있다(예를 들어, 비디오 클립 위에 걸친 반투명 SVG 모양). 또한 이 새 버전에 따라 오는 마이크로소프트 이진 행위는 Internet Explorer version 5 이상에서 SVG 인라인 컨텐츠를 가능하게 해준다. 성능상의 관점(Performance-wise)에서 보면 애니메이션과 상호작용성에 대하여 매크로미디어(Macromedia)사의 플래시 플레이어(Flash Player)에 견줄 만하다.

기타 독자적인 주요 SVG 뷰어로는 자바 기반이며 오픈 소스인 바틱(Batik) 프로젝트가 있다. 아파치 XML 프로젝트의 일환으로 Batik 1.1은 SVG 1.0 규격의 정적인 모든 사양을 지원하며 가까운 시일 내에 SVG의 동적인 사양을 추가하려고 연구중이다. 바틱(Batik)은 실제로는 뷰어 그 이상이다. 실제로는 일종의 도구모음으로서 SVG를 화면에 뿌려주는 변환기를 제공하며, DOM과 API를 통한 서버측 생성, 폰트 변환기, 그리고 예쁘게 출력해 주는 인쇄자까지 제공한다. 바로 그러한 능력 덕분에 아주 편리하게 바틱(Batik)을 자바기반의 웹 출판 프레임워크로도 사용할 수 있다. 바틱(Batik)은 어느 자바 플랫폼에사도 사용할 수 있으며 Apache FOPILOG JViews에 아주 훌륭하게 합병되었다.

브라우저(Browsers)

SVG는 XML이므로, SVG를 고유하게 지원하면서 네임스페이스(namespaces)을 가진 인라인 능력을 갖춘 브라우저를 찾아 보고 싶을 것이다. 이런 경우라면, 여러분은 운이 좋은 편이다. 왜냐하면 세 개의 오픈 소스 구현이 돌아 다니고 있기 때문이다. 무엇보다도 우선 알렉스 프릿쯔(Alex Fritze)가 모질라(Mozilla)에 SVG 지원을 추가하는 작업을 들 수 있다. 이 특별한 구축은 (아직 모질라 트리의 일부는 아니지만) 기존의 모질라 XML, CSS, DOM 위에 구축된다. 그리고 이 프로젝트는 상당히 빠른 속도로 진전을 보이고 있다. 현재 SVG-가능한 모질라는 이미 상당량의 SVG 규격을 지원하며 유용한 스크립팅 기능을 허용할 뿐만 아니라 윈도우, 매킨토시, 그리고 리눅스에서도 사용할 수 있다. 알렉스(Alex)는 규격을 더 많이 지원하기 위한 작업을 하고 있다(모쪼록 이렇게 작업한 SVG 지원이 버전 1.0까지는 모질라 코드베이스에 포함되기를 기대한다).

W3C의 아마야(Amaya)는 SVG의 흥미로운 하부모둠 구현을 그의 XML 지원의 일부로 제공한다(XHTML, MathML, RDF, 그리고 등등). 아직까지는 SVG 지원이 약간 가볍기는 하지만 아마야(Amaya)는 그저 단순한 브라우저는 아니다. 아마야가 지향하고 있는 주요 디자인 목표에는 W3C 표준을 준수하고 그 표준에 대한 개념의 증명을 제공하는 저작 도구를 제공하는 것을 포함하고 있기 때문이다. 아마야를 사용하면 여러 XML 네임스페이스로 분산된 문서들을 WYSIWYG 방식으로 편집할 수 있다. 사실, 아마야가 WYSIWYG-스타일로 XML 문서의 일부로 SVG 컨텐츠(content) 생성을 허용해주는 도구로 오직 유일하게 출시되어 있다. 아마야는 조만간 규격을 완전하게 지원하도록 SVG 지원을 확장하여, 차세대 SVG 개선점들을 따를 것이라고 생각한다.

고유의 SVG 지원을 브라우저에 포함시키려는 또다른 시도로 X-Smiles 프로젝트가 있다. 자바 오픈 소스 프로젝트인 X-Smiles는 여러 XML 독립 애플리케이션(CSIRO SVG Viewer, Apache FOP, Xerces, Xalan)들 사이를 붙여주는 접착제로 시작하여 점차로 성장해서 XML 기능(XForms과 SMIL)의 구현을 추가로 포함시키기에 이르렀다.

지금 당장은 규격 준수와 사용자 보급면에 있어서 어도비의 SVG 뷰어처럼 독립 애플리케이션이 선두에 앞서가고 있지만, SVG가 진정으로 속해 있는 곳에 통합하려는 논리적인 조류가 있을 듯하다. SVG를 XML 브라우저 안에 깊숙히 구현하면 XML의 목표중의 하나에 한 걸음 더 성큼 다가서는 것이 된다. 문서 상호운용(document interoperability)이 바로 그 목표라고 할 수 있을 것이다.

현재 SVG를 만들 수 있는 방법은?

이제 SVG 문서를 보는 법을 개관하여 보았으므로 그런 문서를 약간 만들어 보고 싶은 생각이 들 수 있을 것이다. 그러기 위해서는 다음과 같은 2가지 방법이 있다. 손으로 코딩하기 또는 SVG가-가능한 그래픽 패키지를 이용하기. 두 방법 모두 나름대로의 장점과 단점이 있다.

SVG가 가능한 편집기
Learning XML


손으로 코딩하는 SVG는 생각보다 미친 짓은 아니다. SVG 규격을 읽어 볼 수 있기 때문에 특히나 XML을 잘 안다면 더욱 좋다. 확실히 필터에 관한 장은 약간 어렵지만 간단한 SVG 그래픽을 그래디언트(gradients), 불투명 효과(opacity effects) 등등으로 편집하는 것은 아주 쉽다. 손으로 코딩하는 SVG가 가지는 장점은 그래픽 구조를 대단히 깔끔하게 통제할 수 있다는 것이다. 텍스트 편집기에서는 SVG를 편집하는 여러 가지 잔재주를 부리겠지만, 인기 만점의 XML-Spy 4.1 패키지에서는 SVG에 대해 뛰어난 고유의 지원을 제공한다. 이 구문 강조는 대단히 깨끗하며, 요소와 속성 완성 또한 아주 간편하다. 그리고 XML-Spy는 또한 SVG DTD (또는 사용가능하다면, 스키마)에 대하여 SVG 내용의 유효성 평가기능을 제공한다. 또다른 깔끔한 기능은 XSLT 변환을 사용하여 어느 XML 파일로부터도 SVG를 만들 수 있으며 그 결과를 편집기 안에 있는 브라우저 뷰에 표시할 수 있다는 것이다. TextPadvim과 같은 인기있는 편집기들은 SVG 구문 강조 기능을 제공한다. 어도비 역시 SVG의 지원을 자사의 골라이브(GoLive) 제품에 제공하는데, 이 도구를 이미 사용하고 있다면 쓸모가 많을 것이다.

SVG가-가능한 그래픽 패키지

마음 설레게 하는, SVG가 가진 한가지 특징은 그 덕분에 결국 디자인 아티스트들이 (프로그래머에게도 딱 맞는 언어로) 풍부한 그래픽 컨텐츠(content)를 웹에 넘겨줄 수 있다는 것이다. 그래픽 디자이너들이 SVG 규격을 독파할 것이라고 그리고 손으로 SVG를 해킹하기 시작하리라고 전혀 기대할 수 없기 때문에, 대부분의 유명한 그래픽 회사들은 SVG를 자사 제품에 지원하고 있다. 심지어 어떤 회사들은 SVG를 코어 바로 중심부에 배치하기도 한다.

역사적으로는 SVG를 지원하는 첫 번째 거대 벤더는 코렐(Corel)사일 것이다. 코렐은 엑스포트(export) 플러그-인을 자사의 드로(Draw!) 프로그램에 제공하였으며 그 이후로도 이러한 노력을 계속하여 현재 버전 10에 이르고 있다. 또한 이 버전도 SVG 문서의 임포트를 부분적으로 지원하고 있다.

자스크(Jasc)사도 SVG 개발에 근접하고 있다. (이전에는 트러젝토리 프로(Trajectory Pro)라고 하던) 자스크(Jasc)사의 웹드로(WebDraw) 제품은 현재 미리보기판 5에 도달해 있으며 SVG를 중심으로 구축되었고 SVG 포맷을 유일한 고유 포맷으로 사용하고 있다. 웹드로(WebDraw)는 3개의 뷰 인터페이스를 제공한다는 점만 제외하면 고전적인 일러스트레이터류의 벡터 그래픽 패키지와 유사하다. 첫 번째는 위지위그(WYSIWYG)[1] 뷰로서 여기에서는 그리기 툴바로 직접 그래픽 객체를 그릴 수 있으며, 그 객체들의 특성을 변경하고, 래스터[2] 그래픽 등등을 임포트할 수 있다. 이 뷰는 아직 DOM 스크립팅 기능을 추가할 방법은 지원하지 않는다. 그리고 제한적으로 애니메이션을 지원하지만 SVG의 정적인 측면은 견고하게 지원한다. 두 번째 뷰는 산뜻한 구문 강조기능을 가지고 있는 텍스트 편집기 뷰인데, 여기에서 원한다면 손으로 변경사항들을 편집할 수 있다. 이 편집기는 애니메이션 요소들 뿐만 아니라 DOM 스크립팅을 SVG 그래픽에 추가할 때 아주 유용하다. 세 번째 뷰는 (보통 어도비의 SVG 뷰어를 사용하는) 브라우저 뷰로서 앞의 두 뷰에서 편집해온 내용들이 여기에서 최종 문서로 가공되며 스크립팅과 애니메이션이 적용된다. 웹드로(WebDraw)의 진정한 아름다움은 세 뷰 모두 언제나 조화를 이루어 손-코딩과 WYSIWYG 모드에서 투명한 편집과 보기를 허용해 주는 것이다. WebDraw 1.0 버전이 배포되면 필터와 애니메이션을 비롯하여 SVG 규격을 완전히 지원하리라 생각한다. 자스크(Jasc) 사이트에 가면 미리보기판을 공개 테스트용으로 맛볼 수 있다.

어도비는 자사 뷰어에서도 볼 수 있듯이 SVG를 자사의 그래픽 제품 라인 전체를 통해 일관되게 지원하고 있다. 이런 집념의 첫 성과는 일러스트레이터(Illustrator) 8의 SVG 엑스포트 플러그-인이었다. 지금까지 일러스트레이터는 항상 주요 SVG-가능 도구였으며, 이것은 SVG의 정적인 측면을 가장 잘 만족시켰기 때문에 당연한 일이라고 볼 수 있다. 일러스트레이터 10은 대단히 진보된 SVG 도구이다. 일러스트레이터는 SVG를 고유의 포맷으로 지원하기 때문에, 아무 문제없이 SVG와 SVGZ(gzipped SVG)를 읽고 쓸 수 있고, SVG 출력으로 저장되는 심볼 기능을 지원하며, 사건 청취자(listner)를 추가하고 그에 상응하는 행위들을 객체들에다 부착할 수 있는 상호작용 패널을 지원한다. 그리고 아주 인상적인 것으로 필터 애플리케이션을 고유의 SVG 필터로 지원한다. 사실 심지어 외부 SVG 파일로부터 맞춤 필터를 수입할 수도 있어서 그것을 일러스트레이터 문서로 즉시 적용할 수도 있다. 일러스트레이터 10에는 한가지 약점이 있다. 일러스트레이터 10은 기본적인 도형 형태에 대하여 전혀 모른다. 사각형, 원, 다각형은 SVG 요소로 엑스포트되며, SVG 문서의 의미구조 부분이라는 흥미로운 부분을 잃어 버린다. 어도비는 최근 Quark XPress 경쟁자인 자사의 제품으로 InDesign 2.0을 배포했는데, 이 제품은 임포트(import)와 엑스포트(export)가 가능한 SVG와 XML 능력을 광범위하게 제공하는 것 같다. 아마도 살펴 볼 가치가 있을 것이다. 어도비의 벡터 에니메이션 도구인 LiveMotion 2.0이 곧 탄생할 것을 기대해도 좋다. 새로운 버전은 일러스트레이터가 정적인 측면을 지원했던 것처럼 SVG의 동적인 측면을 지원할 것을 약속한다.

인쇄 산업(Quark XPress 5)과 3D 산업(Swift3D)에 인기있는 소프트웨어에 SVG 엑스포트 기능이 존재하는 것 또한 주목할 만하다.

이러한 제품들 대부분이 윈도우 전용이거나 윈도우/맥 전용이기는 하지만, 리눅스용으로도 갖가지 SVG 관련 패키지들을 구할 수 있다. 우선 아마야는 자신의 WYSIWYG 편집 모드에서 SVG의 하부모둠을 지원한다. 벡터 그래픽 편집 도구 영역에서는 Sodipodi가 흥미로운 프로젝트인데, 이 프로젝트는 SVG를 자신의 고유 포맷으로 사용한다. 리눅스용 SVG-가능 제품들은 시간이 지나면 분명히 성숙되기는 하겠지만, 디자이너들이 오늘날 SVG를 견고하게 사용하려면 윈도우와 맥에 집중해야 할 필요가 있을 것이다.

결론

현재 사용할 수 있는 SVG 도구들을 전반적으로 소개한 이 기사가 오늘날의 제품에서 어떤 도구가 필요한지, 무엇을 기대할 수 있는지에 대해 독자들에게 어떤 아이디어라도 제공했기를 바란다. 여전히 초기 상태임에도 불구하고 산업계에서의 SVG의 지원 상황은 놀랍다. 그동안 이루어져온 발전 속도와 여전히 진행중인 스피드를 고려해보는 것도 또한 흥미롭다. 이 속도대로라면 이 기사는 6개월이 지나면 완전히 다시 작성되어야 할 것이다.

참고기사
주석
[1] "What You See, What You Get"의 머리문자 모음. 화면에 보이는 모습 그대로 프린터에 출력된다는 의미.
[2] 비트맵형 그래픽.
TAG :
댓글 입력
자료실

최근 본 책0